<!-- 高通量计算-计算页面 -->
<template>
  <div class="main-app">
    <el-page-header @back="cancel" :content="title" style="margin: 1%;"></el-page-header>
    <div style="width: 95%; margin: 1% 0 0 2%;">
      <el-form ref="form" :model="form" :rules="rules" label-width="15%" disabled>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="24">
            <el-form-item label="id:" prop="id">
              <el-input v-model="form.id" />
            </el-form-item>
            <el-form-item label="builder_meta:" prop="builder_meta">
              <el-input type="textarea" autosize v-model="form.builder_meta" />
            </el-form-item>
            <el-form-item label="nsites:" prop="nsites">
              <el-input v-model="form.nsites" />
            </el-form-item>
            <el-form-item label="elements:" prop="elements">
              <el-input v-model="form.elements" />
            </el-form-item>
            <el-form-item label="nelements:" prop="nelements">
              <el-input v-model="form.nelements" />
            </el-form-item>
            <el-form-item label="composition:" prop="composition">
              <el-input v-model="form.composition" />
            </el-form-item>
            <el-form-item label="composition_reduced:" prop="composition_reduced">
              <el-input v-model="form.composition_reduced" />
            </el-form-item>
            <el-form-item label="formula_pretty:" prop="formula_pretty">
              <el-input type="textarea" autosize v-model="form.formula_pretty" />
            </el-form-item>
            <el-form-item label="formula_anonymous:" prop="formula_anonymous">
              <el-input v-model="form.formula_anonymous" />
            </el-form-item>
            <el-form-item label="chemsys:" prop="chemsys">
              <el-input v-model="form.chemsys" />
            </el-form-item>
            <el-form-item label="volume:" prop="volume">
              <el-input v-model="form.volume" />
            </el-form-item>
            <el-form-item label="density:" prop="density">
              <el-input v-model="form.density" />
            </el-form-item>
            <el-form-item label="density_atomic:" prop="density_atomic">
              <el-input v-model="form.density_atomic" />
            </el-form-item>
            <el-form-item label="symmetry:" prop="symmetry">
              <el-input v-model="form.symmetry" />
            </el-form-item>
            <el-form-item label="material_id:" prop="material_id">
              <el-input v-model="form.material_id" />
            </el-form-item>
            <el-form-item label="structure:" prop="structure">
              <el-input type="textarea" autosize v-model="form.structure" />
            </el-form-item>
            <el-form-item label="deprecated:" prop="deprecated">
              <el-input v-model="form.deprecated" />
            </el-form-item>
            <el-form-item label="deprecation_reasons:" prop="deprecation_reasons">
              <el-input v-model="form.deprecation_reasons" />
            </el-form-item>
            <el-form-item label="initial_structures:" prop="initial_structures">
              <el-input type="textarea" autosize v-model="form.initial_structures" />
            </el-form-item>
            <el-form-item label="task_ids:" prop="task_ids">
              <el-input type="textarea" autosize v-model="form.task_ids" />
            </el-form-item>
            <el-form-item label="deprecated_tasks:" prop="deprecated_tasks">
              <el-input type="textarea" autosize v-model="form.deprecated_tasks" />
            </el-form-item>
            <el-form-item label="calc_types:" prop="calc_types">
              <el-input type="textarea" autosize v-model="form.calc_types" />
            </el-form-item>
            <el-form-item label="last_updated:" prop="last_updated">
              <el-input v-model="form.last_updated" />
            </el-form-item>
            <el-form-item label="created_at:" prop="created_at">
              <el-input type="textarea" autosize v-model="form.created_at" />
            </el-form-item>
            <el-form-item label="origins:" prop="origins">
              <el-input type="textarea" autosize v-model="form.origins" />
            </el-form-item>
            <el-form-item label="warnings:" prop="warnings">
              <el-input type="textarea" autosize v-model="form.warnings" />
            </el-form-item>
            <el-form-item label="task_types:" prop="task_types">
              <el-input type="textarea" autosize v-model="form.task_types" />
            </el-form-item>
            <el-form-item label="run_types:" prop="run_types">
              <el-input type="textarea" autosize v-model="form.run_types" />
            </el-form-item>
            <el-form-item label="entries:" prop="entries">
              <el-input type="textarea" autosize v-model="form.entries" />
            </el-form-item>
            <el-form-item label="fields_not_requested:" prop="fields_not_requested">
              <el-input type="textarea" autosize v-model="form.fields_not_requested" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 40px; text-align: center">
          <el-form :inline="true" class="form-inline">
            <el-form-item>
              <el-button type="info" plain @click="cancel">取消</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="isLoading" @click="save">提交</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  MaterialDetail
} from "../../api/material.js";

export default {
  // 页面公共变量
  data() {
    return {
      isLoading: false,          // 是否显示加载框
      title: "高通量计算",       // 顶部标题
      activeName: "detail",     // 当前选中的Tab页面
      id: "",                   // 详情数据的主键ID
      form: {},                 // 详情内容
    };
  },
  // 页面创建完成事件
  async created() {
    // 接收路由传递的参数
    const { id } = this.$route.params;

    // 将接收到的数据填充至页面公共变量
    this.id = id;

    // 获取详情数据
    await this.getDataInfo(id);
  },
  // 页面相关方法
  methods: {
    // 获取详情数据
    async getDataInfo(id) {
      // 获取详情数据
      const { data } = await MaterialDetail({
        Id: id
      });
      if (data) {
        // 设置表单数据
        this.form = data;
      }
    },
    // 保存数据事件
    save() {
      this.$message({ type: 'success', message: '提交成功' });
      this.$router.back();
    },
    // 返回事件
    cancel() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
// 区域标题样式
.titie-bar {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background-color: rgba(61, 171, 175, 1);
  margin: 5px 0 5px 0;
}
.titie-bar span {
  color: #0A0A0A;
  width: 80px;
  font-size: 22px;
  line-height: 32px;
  white-space: nowrap;
  overflow-wrap: break-word;
  margin-left: 15px;
}
</style>
